<template>
  <div>
      <div class="bg">
          <div class="box-l" v-drag @click.self="changeColor(bgArr,'box1')" style="background-color:rgb(255,255,255)" ref="box1"></div>
          <div class="box-r" v-drag @click.self="changeColor(boxArr,'box2')" style="background-color:rgb(0,0,0)"  ref="box2"></div>
      </div>
  </div>
</template>

<script>
import mixins from "@/mixins/mixins.js"

export default {
    data(){
        return {
            bgArr:[255,255,255],
            boxArr:[0,0,0],
        }
    },
    mixins:[mixins],
    methods:{
        // 改变颜色
        changeColor(arr,str){
            for(var i = 0; i < 3; i++){
                let num = this.randomNum(255,0)
                arr.splice(i,1,num)
            }
            this.$refs[str].style.backgroundColor = `rgb(${arr[0]},${arr[1]},${arr[2]})`
        },





    },
}
</script>

<style scoped lang="less">
    .bg{
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .box-l,.box-r{
        width: 50%;
        height: 100vh;

    }
</style>